var myChart = echarts.init(document.getElementById('main'));//声明表格渲染是哪个id
$(function(){
    queryAllDtu(); //查询全部设备
    var selectType = "",//声明选择图形的类型
        lineType="";//声明折线图的areaStyle类型
    loadBarColumn();   //初始化加载柱状图
    $("#charType").change(function(){
        var createTime=$("input[name='createTime']").val(),
            deviceId=$(".timeQuery select").val();
        selectType=$(this).val();
        if (selectType=="柱状图"){
            loadBarColumn(createTime,deviceId);   //加载柱状图
        }else if(selectType=="折线图"){
            lineType="rgba(0,0,0,0)";
            loadLineAreaColumn(createTime, deviceId,lineType);   //加载折线图
        }else if(selectType=="面积图") {
            lineType = "#C1232B";
            loadLineAreaColumn(createTime, deviceId, lineType);   //加载面积图
        }
    });
    //点击打印
    $("#printBtn").click(function () {
        iPrint()
    });
    //点击查询时间和设备
    $(".queryBtn").click(function(){
        var createTime=$("input[name='createTime']").val(),
            deviceId=$(".timeQuery select").val();
        selectType=$("#charType").val();
        if (selectType=="柱状图"){
            loadBarColumn(createTime,deviceId);   //加载柱状图
            return;
        }else if(selectType=="折线图"){
            loadLineColumn(createTime,deviceId);   //加载折线图
            return;
        }else if(selectType=="面积图"){
            loadAreaColumn(createTime,deviceId);   //加载面积图
            return;
        }else{
        }
    })

});
/****
 * ****柱状图
 * **/
function loadBarColumn(createTime,deviceId) {
    // 显示标题，图例和空的坐标轴
    var option={
        title: {
            text: '月报表柱状图'
        },
        tooltip: {},
        legend: {
            data: ['水量']
        },
        xAxis: {
            data: []
        },
        yAxis: {
            splitLine: { show: false },//去除网格线
            name: '水量'

        },
        series: [{
            barWidth: "30px",
            name: '当月水量排行',
            type: 'bar',
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#333'
                        }
                    }
                }
            },
            data: []
        }]
    };
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）

    $.ajax({
        type: 'get',
        url : "/rest/web/flowDailyReport/selectFlowMonthReportChart",
        dataType: "json",//返回数据形式为json
        data : {
            createTime: createTime==undefined||createTime==""?new Date(new Date()).Format("yyyy"):createTime,
            deviceId:deviceId
        },
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.data, function (index, item) {
                var str = item.dayTime;//
                names.push(str.substring(5));    //挨个取出类别并填入类别数组
                nums.push(item.waterAmount);    //挨个取出销量并填入销量数组
            });

            myChart.setOption({        //加载数据图表
                xAxis: {
                    name: '日期',
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '水量',  //显示在上部的标题
                    data: nums
                }]
            });
        }
    });
    myChart.setOption(option);
}
/****
 * ****折线图和面积图
 * **/
function loadLineAreaColumn(createTime, deviceId,lineType){
    // 显示标题，图例和空的坐标轴
    var option={
        title: {
            text: '月报表折线图'
        },
        tooltip: {},
        legend: {
            data: ['水量']
        },
        xAxis: {
            data: []
        },
        yAxis: {
            splitLine: { show: false },//去除网格线
            name: '水量'
        },
        series: [{
            barWidth: "30px",
            name: '当月水量排行',
            type: 'line',
            areaStyle:{
                color:lineType
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#333'
                        }
                    }
                }
            },
            data: []
        }]
    };
    var names = [];    //类别数组（实际用来盛放X轴坐标值）
    var nums = [];    //销量数组（实际用来盛放Y坐标值）

    $.ajax({
        type: 'get',
        url : "/rest/web/flowDailyReport/selectFlowMonthReportChart",
        dataType: "json",//返回数据形式为json
        data : {
            createTime: createTime==undefined||createTime==""?new Date(new Date()).Format("yyyy"):createTime,
            deviceId:deviceId
        },
        success: function (result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(result.data, function (index, item) {
                var str = item.dayTime;//
                names.push(str.substring(5));    //挨个取出类别并填入类别数组
                nums.push(item.waterAmount);    //挨个取出销量并填入销量数组
            });

            myChart.setOption({        //加载数据图表
                xAxis: {
                    name: '日期',
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '水量',  //显示在上部的标题
                    data: nums,
                    type: 'line',
                    areaStyle: ""
                }]
            });
        }
    });
    myChart.setOption(option);
}

/**查询全部的DTU设备 **/
function queryAllDtu(){
    $.ajax({
        type: "GET",
        url: "/rest/web/dtu/selectDtuList",
        dataType: "json",
        success: function (data) {
            var dtuList = data.data,
                dtuHtml="";
            $.each(dtuList, function (i, o) {
                dtuHtml+='<option value="'+o.dtuId+'">'+o.code+'</option>'
            });
            $(".timeQuery select option").after(dtuHtml);
        }
    });

}
//打印方法
function iPrint() {
    $('#print').attr('src',myChart.getDataURL());
    $('#print').jqprint();
    $('#print').attr('src', '');
}


